<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <script type="text/javascript" src="../script/api.js"></script>
    <style type="text/css">
        .aui-list .aui-list-item-media {
            width: 3rem;
        }

        .notes-add {
            position: fixed;
            left: 0.5rem;
            bottom: 0.5rem;
            width: 3rem;
            z-index: 99;
        }

        textarea {
            height: 8rem;
            background-color: #ffffff;
            padding: 0.5rem;
        }

        .photos img {
            display: block;
            width: 100%;
        }

        .add-photos>div {
            width: 100%;
            height: 5.15rem;
            line-height: 5.15rem;
        }

        .add-photos>div .aui-iconfont {
            font-size: 2rem;
            color: #ccc;
        }

        .image-item {
            position: relative;
            height: 5.3rem;
            overflow: hidden;
            background-color: #f0f0f0;
        }

        .image-item img {
            display: block;
            margin: 0 auto;
            width: auto;
            height: 100%;
        }

        .image-item .delete-btn {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 28px;
            height: 28px;
            background-color: rgba(0, 0, 0, 0.7);
            margin-left: -14px;
            margin-top: -14px;
            color: #ffffff;
            text-align: center;
            border-radius: 50%;
        }
        #pic-one {
          width: 50%;
          margin: 0 auto;
        }

        #pic-two {
          width: 50%;
          margin: 0 auto;
        }

        #pic-str {
          width: 50%;
          margin: 0 auto;
        }

        #pic-str-one {
          width: 50%;
          margin: 0 auto;
        }

        #pic-str-two {
          width: 50%;
          margin: 0 auto;
        }
        #info input {
            background-color: #ffffff!important;
            padding-left: 5px;
            color: black!important;
            border-radius: 2px!important;
            display: inline-block!important;
            max-width: 5rem;
            height: 1.3rem;
        }
        #main span{
          width: 2rem;
          max-width: 4rem;
        }
        #main input{
          width: 80%;
          display: inline-block!important;
        }
        #main span{
          width: 20%;
          display: inline-block!important;
        }
        .but {
            border-radius: 5px!important;
            width: 100%;
            background-color: #03a9f4!important;
            height: 40px;
            margin-top: 10px!important;
            color: #ffffff;
        }
        #img{
          background-color: white;
          text-align: center;
          margin:0 5%;
          border: 1px solid #20B2AA;
        }
        #img div{
          width:200px;
          color:black;
          margin: auto;
          color: #003C9D;
          text-align:center;
        }

        .aui-list{
          /*border-left: 1px solid  #ddd;
          border-right: 1px solid #ddd;*/
          border: 1px solid #ddd;
        }

    </style>
</heado>

<body style="background-color:white;">
    <form id="f"></form>
    <div id="one" style="display:block;">
      <section class="aui-content-padded aui-clearfix">
          <div class="aui-info">
              <div class="aui-info-item aui-padded-r-10" style="width: 13rem">
                  <div>
                      <i class="aui-iconfont aui-icon-location"></i>
                      <span id="location" class="aui-ellipsis">正在获取地址.....</span>
                  </div>
              </div>
              <div class="aui-info-item" style="width: 80px;" tapmode>
                  <i class="aui-iconfont aui-icon-refresh aui-text-info aui-margin-r-5"></i>
                  <span class="aui-text-info" onclick="getAddstress()">重新定位</span>
              </div>
          </div>
      </section>
      <section class="aui-content-padded aui-clearfix" id="info">
          <div class="aui-info">
              <div class="aui-info-item aui-padded-r-10">
                  <span style="color:black;width:3rem">临检人:</span>
                  <input type="text" name="policename" readOnly="true">
                  <input type="text" name="police" form="f" style="display: none!important" value="1">
                  <input type="text" name="place" form="f" style="display: none!important">
                  <input type="text" name="coodinate" form="f" style="display: none!important">
              </div>
              <div class="aui-info-item" tapmode>
                  <span style="color:black;width:4rem">临检日期:</span>
                  <input type="text" name="date" form="f" readOnly="true">
              </div>
          </div>
      </section>
            <form id="wr" enctype="multipart/form-data">
                <input id="upload-one" name="file" accept="image/*;capture=camera" type="file" style="display: none" />
            </form>
            <div id="img">
                <img id="pic-one" form="f" name="shad" src="../image/camera.png">
                <!-- <img id="show" src="../image/camera.png" alt="点击拍摄车牌"/> -->
                <div id="msgw">点击图片进行拍摄</div>
            </div>
            <section class="aui-content-padded aui-margin-t-15">
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-border-r color-orange">
                                姓名
                            </div>
                            <div class="aui-list-item-input aui-padded-l-10">
                                <input type="text" class="abbb" name="name" form="f" readOnly="true">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-border-r color-orange">
                              性别
                            </div>
                            <div class="aui-list-item-input aui-padded-l-10">
                              <input type="text" class="abbb" name="gender" form="f" readOnly="true">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-border-r color-orange">
                              民族
                            </div>
                            <div class="aui-list-item-input aui-padded-l-10">
                              <input type="text" class="abbb" name="nation" form="f" readOnly="true">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-border-r color-orange">
                              出生
                            </div>
                            <div class="aui-list-item-input aui-padded-l-10">
                              <input type="text" class="abbb" name="born" form="f" readOnly="true">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-border-r color-orange">
                              住址
                            </div>
                            <div class="aui-list-item-input aui-padded-l-10">
                              <input type="text" class="abbb" name="address" form="f" readOnly="true">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label aui-border-r color-orange">
                              号码
                            </div>
                            <div class="aui-list-item-input aui-padded-l-10">
                              <input type="text" class="abbb" name="num" form="f" readOnly="true">
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <section class="aui-content-padded aui-margin-t-15">
              <input type="button" value="下一步" onclick="inp_one()" style="display:inline-block;" class="but">
            </section>
    </div>
    <!--*************************************************************************************************** -->
    <div id="two" style="display:none">
        <form id="tj-two">
            <div id="img">
                <img id="pic-two" src="../image/camera.png">
                <div id="msgw-two">点击图片进行拍摄</div>
            </div>
            <input id="upload-two" name="file" accept="image/*;capture=camera" type="file" style="display: none" />
        </form>

          <section class="aui-content-padded aui-margin-t-15">
              <ul class="aui-list aui-form-list">
                  <li class="aui-list-item">
                      <div class="aui-list-item-inner">
                          <div class="aui-list-item-label aui-border-r color-orange">
                              发证时间
                          </div>
                          <div class="aui-list-item-input aui-padded-l-10">
                            <input type="text" id="accc" name="start_date" form="f" style="display:inline-block" readOnly="true">
                          </div>
                      </div>
                  </li>
                  <li class="aui-list-item">
                      <div class="aui-list-item-inner">
                          <div class="aui-list-item-label aui-border-r color-orange">
                              到期时间
                          </div>
                          <div class="aui-list-item-input aui-padded-l-10">
                            <input type="text" id="accc" name="end_date" form="f" style="display:inline-block" readOnly="true">
                        </div>
                      </div>
                  </li>
                  <li class="aui-list-item">
                      <div class="aui-list-item-inner">
                          <div class="aui-list-item-label aui-border-r color-orange">
                              签发机关
                          </div>
                          <div class="aui-list-item-input aui-padded-l-10">
                            <input type="text" id="accc" name="office" form="f" style="display:inline-block" readOnly="true">
                        </div>
                      </div>
                  </li>
                </ul>
          </section>
          <section class="aui-content-padded aui-margin-t-5 aui-margin-b-5">
              <input type="button" value="返回" onclick="inp_one_two()" style="display:inline-block" class="but">
          </section>
          <section class="aui-content-padded aui-margin-t-5 aui-margin-b-5">
              <input type="button" value="下一步" onclick="inp_two()" style="display:inline-block" class="but">
          </section>
    </div>
    <!--*************************************************************************************************** -->
    <div id="str" style="display:none">

        <div id="img">
            <img id="pic-str" src="../image/camera.png">
            <div id="msgw-str">点击图片进行拍摄</div>
            <form id="tj-str-one">
                <input id="upload-str" name="file" accept="image/*;capture=camera" type="file" style="display: none" />
            </form>
        </div>
        <div id="img">
            <img id="pic-str-one" src="../image/camera.png">
            <div id="msgw-str-one">点击图片进行拍摄</div>
            <form id="tj-str-two">
                <input id="upload-str-one" name="file" accept="image/*;capture=camera" type="file" style="display: none" />
            </form>
        </div>

        <div id="img">
            <img id="pic-str-two" src="../image/camera.png">
            <div id="msgw-str-two">点击图片进行拍摄</div>
            <form id="tj-str-str">
                <input id="upload-str-two" name="file" accept="image/*;capture=camera" type="file" style="display: none" />
            </form>
        </div>
        <section class="aui-content-padded aui-margin-t-5 aui-margin-b-5">
          <input type="button" value="返回" onclick="inp_two_two()" style="display:inline-block" class="but">
        </section>
        <section class="aui-content-padded aui-margin-t-5 aui-margin-b-5">
          <input type="submit" id="s" class="but">
        </section>
            <div style="display:none">
            <input type="text" form="f" name="img1"></input>
            <input type="text" form="f" name="img2"></input>
            <input type="text" form="f" name="img3"></label>
            <input type="text" form="f" name="img4"></input>
            <input type="text" form="f" name="img5"></input>

        </div>


    </div>

</body>
<script type="text/javascript" src="../script/properties.js"></script>
<script type="text/javascript" src="../script/getAddstress.js"></script>
<script>
    apiready = function() {
        var user = localStorage.getItem("user");
        var u = eval("("+user+")");
        $("input[name=policename]").val(u.name);
        getNowFormatDate();
        getAddstress();
    }
    //建立一個可存取到該file的url
    $("#s").click(function() {
        if (document.getElementById('msgw-str').innerHTML == "点击图片进行拍摄" || document.getElementById('msgw-str-one').innerHTML == "点击图片进行拍摄" || document.getElementById('msgw-str-two').innerHTML == "点击图片进行拍摄") {
            alert("请先上传图片");
        } else if (document.getElementById('msgw-str').innerHTML == "正在识别,请稍等....." || document.getElementById('msgw-str-one').innerHTML == "正在识别,请稍等....." || document.getElementById('msgw-str-two').innerHTML == "正在识别,请稍等.....") {
            alert("请等待图片识别完毕");
        } else {
            var police = $("#f").serialize();
            $.ajax({
                url: URL + "edit/AddTimsges",
                type: "post",
                dataType: "json",
                data: police,
                success: function(data) {
                    var result = eval("(" + data + ")");
                    if (result.msg == "录入成功") {
                        alert("录入成功");
                        location.href = "home_win.html";
                    }

                }
            });
            return false;
        }
    })

    function inp_one() {
        if (document.getElementById('msgw').innerHTML == "点击图片进行拍摄") {
            alert("请先上传图片");
        } else if (document.getElementById('msgw').innerHTML == "正在识别,请稍等.....") {
            alert("请等待图片识别完毕");
        } else if (document.getElementById('msgw').innerHTML == "图片有误，请重新上传") {
            alert("图片有误，请重新上传");
        } else if ($("input[name=name]").val() == "" ||
            $("input[name=gender]").val() == "" ||
            $("input[name=nation]").val() == "" ||
            $("input[name=born]").val() == "" ||
            $("input[name=num]").val() == "" ||
            $("input[name=address]").val() == "") {
            alert("图片识别不全，请重新上传");
        } else {
            document.getElementById("two").style.display = "block";
            document.getElementById("one").style.display = "none";
        }

    }

    function inp_one_two() {
        document.getElementById("one").style.display = "block";
        document.getElementById("two").style.display = "none";

    }

    function inp_two() {
        if (document.getElementById('msgw-two').innerHTML == "点击图片进行拍摄") {
            alert("请先上传图片");
        } else if (document.getElementById('msgw-two').innerHTML == "正在识别,请稍等.....") {
            alert("请等待图片识别完毕");
        } else if (document.getElementById('msgw-two').innerHTML == "图片有误，请重新上传") {
            alert("图片有误，请重新上传");
        } else if ($("input[name=start_date]").val() == "" ||
            $("input[name=end_date]").val() == "" ||
            $("input[name=office]").val() == "" ||
            $("input[name=img2]").val() == "") {
            alert("图片识别不全，请重新上传");
        } else {
            document.getElementById("str").style.display = "block";
            document.getElementById("two").style.display = "none";
        }
    }

    function inp_two_two() {
        document.getElementById("two").style.display = "block";
        document.getElementById("str").style.display = "none";
    }


    $("#upload-one").on("change", function() {
        document.getElementById('msgw').innerHTML = "正在识别,请稍等....."; //预览图片
        var r = new FileReader();
        s = this.files[0];
        r.readAsDataURL(s);
        r.onload = function(e) {
            document.getElementById('pic-one').src = this.result;
        };
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            modal: false
        });
        var fd = new FormData($("#wr")[0]);
        $.ajax({
            url: URL + "edit/AddTimsgAddress",
            type: "post",
            dataType: "json",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data) {
                var result = eval("(" + data + ")");
                console.log(result);
                if (result.name != null) {
                    api.hideProgress();
                    $("input[name=name]").val(result.name);
                    $("input[name=gender]").val(result.sex);
                    $("input[name=nation]").val(result.nationality);
                    $("input[name=born]").val(result.birth);
                    $("input[name=num]").val(result.num);
                    $("input[name=address]").val(result.address);
                    $("input[name=img1]").val(result.src);
                    document.getElementById('msgw').innerHTML = "识别成功";
                } else {
                    api.hideProgress();
                    document.getElementById('msgw').innerHTML = "图片有误，请重新上传";
                }
            }
        })
        return false;

    });
    $("#upload-two").on("change", function() {
        document.getElementById('msgw-two').innerHTML = "正在识别,请稍等....."; //预览图片
        var r = new FileReader();
        s = this.files[0];
        r.readAsDataURL(s);
        r.onload = function(e) {
            document.getElementById('pic-two').src = this.result;
        };
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            modal: false
        });
        var fd = new FormData(document.getElementById("tj-two"));
        $.ajax({
            url: URL + "edit/AddTimsg",
            type: "post",
            dataType: "json",
            data: fd,
            processData: false,
            contentType: false,
            success: function(data) {
                var result = eval("(" + data + ")");
                if (result.issue != null) {
                    api.hideProgress();
                    $("input[name=start_date]").val(result.start_date);
                    $("input[name=end_date]").val(result.end_date);
                    $("input[name=office]").val(result.issue);
                    $("input[name=img2]").val(result.src);
                    document.getElementById('msgw-two').innerHTML = "识别成功";
                } else {
                    api.hideProgress();
                    document.getElementById('msgw-two').innerHTML = "图片有误，请重新上传";
                }
            }
        })
        return false;
    });
    $("#upload-str").on("change", function() {
        document.getElementById('msgw-str').innerHTML = "图片上传中,请稍等....."; //预览图片
        var r = new FileReader();
        s = this.files[0];
        r.readAsDataURL(s);
        r.onload = function(e) {
            document.getElementById('pic-str').src = this.result;
        };
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            modal: false
        });
        var fo = new FormData($("#tj-str-one")[0]);

        $.ajax({
            url: URL + "edit/setTimsges",
            type: "post",
            dataType: "json",
            data: fo,
            processData: false,
            contentType: false,
            success: function(data) {
                var result = eval("(" + data + ")");
                if(result.src!=null){
                    api.hideProgress();
                  $("input[name=img3]").val(result.src);
                  document.getElementById('msgw-str').innerHTML = "图片上传成功"; //预览图片
                }else {
                    api.hideProgress();
                  document.getElementById('msgw-str').innerHTML = "图片上传失败"; //预览图片
                }

            }
        })
        return false;

    });
    $("#upload-str-one").on("change", function() {
        document.getElementById('msgw-str-one').innerHTML = "图片上传中,请稍等....."; //预览图片
        var r = new FileReader();
        s = this.files[0];
        r.readAsDataURL(s);
        r.onload = function(e) {
            document.getElementById('pic-str-one').src = this.result;
        };
        var ft = new FormData($("#tj-str-two")[0]);
        $.ajax({
            url: URL + "edit/setTimsges",
            type: "post",
            dataType: "json",
            data: ft,
            processData: false,
            contentType: false,
            success: function(data) {
                var result = eval("(" + data + ")");
                $("input[name=img4]").val(result.src);
                document.getElementById('msgw-str-one').innerHTML = "图片上传成功";
            }
        })
        return false;
    });
    $("#upload-str-two").on("change", function() {
        document.getElementById('msgw-str-two').innerHTML = "图片上传中,请稍等....."; //预览图片
        var r = new FileReader();
        s = this.files[0];
        r.readAsDataURL(s);
        r.onload = function(e) {
            document.getElementById('pic-str-two').src = this.result;
        };
        var fs = new FormData($("#tj-str-str")[0]);
        $.ajax({
            url: URL + "edit/setTimsges",
            type: "post",
            dataType: "json",
            data: fs,
            processData: false,
            contentType: false,
            success: function(data) {
                var result = eval("(" + data + ")");
                $("input[name=img5]").val(result.src);
                document.getElementById('msgw-str-two').innerHTML = "图片上传成功";
            }
        })
        return false;

    });
    $("#pic-one").click(function() {
        $("#upload-one").click(); //隐藏了input:file样式后，点击头像就可以本地上传
    });
    $("#pic-two").click(function() {
        $("#upload-two").click(); //隐藏了input:file样式后，点击头像就可以本地上传
    });
    $("#pic-str").click(function() {
        $("#upload-str").click(); //隐藏了input:file样式后，点击头像就可以本地上传
    });
    $("#pic-str-one").click(function() {
        $("#upload-str-one").click(); //隐藏了input:file样式后，点击头像就可以本地上传

    });
    $("#pic-str-two").click(function() {
        $("#upload-str-two").click(); //隐藏了input:file样式后，点击头像就可以本地上传

    });

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var strMis = date.getMinutes();
        var s = date.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (strMis >= 0 && strMis <= 9) {
            strMis = "0" + strMis;
        }
        if (s >= 0 && s <= 9) {
            s = "0" + s;
        }

        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
            " " + month + seperator2 + strMis + seperator2 + s;

        $("input[name=date]").val(currentdate);

    }
    window.onload = function() {
        getNowFormatDate();

    }
</script>

</html>
